<script lang="ts" setup>
import { Home, Inbox, FileVideo, AlarmClockCheck, MessageCircle } from 'lucide-vue-next';
import { useRoute, useRouter } from 'vue-router';
import type { Menu } from './types';

const router = useRouter();
const route = useRoute();

const menus = [
  {
    title: '首页',
    key: 'home',
    icon: Home,
    path: '/',
  },
  {
    title: '邮件',
    key: 'mail',
    icon: Inbox,
    path: '/mail',
  },
  {
    title: '媒体',
    key: 'video',
    icon: FileVideo,
    path: '/video',
  },
  {
    title: '任务',
    key: 'tasks',
    icon: AlarmClockCheck,
    path: '/tasks',
  },
  {
    title: '提问',
    key: 'ask',
    icon: MessageCircle,
    path: '/common/ask',
  },
];

const currentKey = computed(() => route.path.split('/')[1] || 'home');

function handleClick(menu: Menu) {
  router.push(menu.path);
}
const getMenuButtonClass = computed(() => (key: string) => ({
  'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground': key === currentKey.value,
}));
</script>

<template>
  <SidebarGroup>
    <SidebarGroupLabel>应用</SidebarGroupLabel>
    <SidebarGroupContent>
      <SidebarMenu>
        <SidebarMenuItem
          v-for="item of menus"
          :key="item.key"
          @click="handleClick(item)"
        >
          <SidebarMenuButton as-child :class="getMenuButtonClass(item.key)">
            <span>
              <component :is="item.icon" />
              <span>{{ item.title }}</span>
            </span>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarGroupContent>
  </SidebarGroup>
</template>

<style>

</style>
